<template>
    <div>
        <header-footer :commonData="{$parent:$parent}">
            <div class="online_apply" v-cloak>
                <div class="crumb">
                    <ul>
                        <li class="color666 f_left">当前位置：</li>
                        <li>
                            <router-link class="color666 f_left" to="/index">首页></router-link>
                        </li>
                        <li class="color666 f_left">三类人员继续教育报名</li>
                    </ul>
                </div>
                <div class="border_content text_center special_apply_box" v-if="!slryApplyInfo">
                    <img src="/static/img/title1.png" width="1150px" height="60px">
                    <h3 class="apply_title">三类人员继续教育报名</h3>
                    <h4 class="apply_title_explain">请填写报名信息</h4>
                    <el-form class="special_apply_form specialConfirm" label-width="100px">
                        <el-form-item class="text_left" label="姓名：">
                            <p class="apply_p">{{webUser.realName}}</p>
                        </el-form-item>
                        <el-form-item class="text_left" label="身份证号：">
                            <p class="apply_p">{{webUser.identityCode}}</p>
                        </el-form-item>
                        <el-form-item label="选择专业：" class="choose_project text_left chooseProfess">
                            <el-tag :key="index" v-for="(item,index) in arrTabs" closable :disable-transitions="false"
                                @close="handleClose(index)">
                                {{item.certificateName}}
                            </el-tag>
                            <a @click="chooseDialogBtn" class="chooseProfessBtn">选择专业</a>
                        </el-form-item>
                        <!-- 专业弹框 -->
                        <slry-apply ref="mychild" @childByValue="slrySureFunc"></slry-apply>
                        <el-form-item class="text_left chooseDiDian" label="选择地点：" style="width: 500px;margin-bottom: 6px;">
                            <el-select v-model="form.lessonPlace" placeholder="请选择地区">
                                <el-option v-for="(item,index) in areas" :key="index" :label="item.dicKey" :value="item.dicKey">
                                </el-option>
                            </el-select>
                            <p>注：面授集训点</p>
                        </el-form-item>
                        <el-form-item class="text_left" label="课时：">
                            <p class="apply_p">{{form.period}}课时</p>
                        </el-form-item>
                        <el-form-item class="text_left" label="价格：">
                            <p class="apply_p">{{form.productPrice}}元<span v-if="form.productPrice!=null">（培训费：60元，教材费：20元）</span></p>
                        </el-form-item>
                        <el-form-item label="选择发票：" class="choose_project">
                            <el-input v-model.trim="invoice.invoiceTitle" readonly @focus="invoiceFunc"></el-input>
                            <a type="button" class="select_class" @click="invoiceFunc">选择发票</a>
                        </el-form-item>
                        <el-form-item class="apply_btns" style="margin: 49px 0 50px 0!important;">
                            <a class="apply_return" @click="prev">返回</a>
                            <a @click="submitSure">确认提交</a>
                        </el-form-item>
                    </el-form>
                </div>
                <!-- 信息确认 -->
                <div class="border_content text_center special_apply_box" v-if="slryApplyInfo">
                    <img src="/static/img/title2.png" width="1150px" height="60px">
                    <h3 class="apply_title">三类人员继续教育报名</h3>
                    <h4 class="apply_title_explain">确认信息</h4>
                    <el-form class="special_apply_form" label-width="100px">
                        <table class="special_webucation_table" width="100%">
                            <thead>
                                <tr>
                                    <th>姓名</th>
                                    <th>身份证号</th>
                                    <th>选择类别</th>
                                    <th>地点</th>
                                    <th>课时</th>
                                    <th>价格</th>
                                    <th>专业（工种）/证书编号</th>
                                    <th width="120px">有效日期</th>
                                </tr>
                            </thead>
                            <tbody>
                                <tr v-for="(item,index) in arrTabs" :key="index">
                                    <td width="80px">
                                        <a target="_blank" :href="item.originalUrl" title="点击查看个人信息">{{item.realName}}</a>
                                    </td>
                                    <td width="190px">{{item.identityCode}}</td>
                                    <td width="110px">{{form.productName}}</td>
                                    <td width="110px">{{form.lessonPlace}}</td>
                                    <td width="80px">{{form.period}}课时</td>
                                    <td width="210px">{{form.productPrice}}元<br>(培训费60元，教材费20元)</td>
                                    <td width="180px">{{item.certificateName}} / {{item.certificateNumber}}</td>
                                    <td width="100px">{{new Date(item.certificateEnddate).Format('yyyy-MM-dd')}}</td>
                                </tr>
                            </tbody>
                        </table>
                        <el-form-item label="发票抬头：" class="text_left" style="margin-top: 20px;">
                            <p class="apply_p">{{invoice.invoiceTitle}}</p>
                        </el-form-item>
                        <el-form-item label="发票类型：" class="text_left">
                            <p v-if="invoice.invoiceType==0" class="apply_p">个人</p>
                            <p v-if="invoice.invoiceType==2" class="apply_p">专票</p>
                            <p v-if="invoice.invoiceType==1" class="apply_p">普票</p>
                        </el-form-item>
                        <el-form-item class="apply_btns" style="margin: 49px 0 50px 0!important;">
                            <p style="color: #FF0000;font-size: 18px;width: 600px;text-align: left;margin-bottom: 10px;">提示：支付宝扫码完成付款后请等待页面跳转完成后再关闭网页!</p>
                            <a class="apply_return" @click="slryApplyInfo=false;">上一步</a>
                            <a @click="toPay">去付款</a>
                        </el-form-item>
                    </el-form>
                </div>
            </div>
            <!-- 报名后未付款弹框 -->
            <apply-nopay :nopayData="{currentApply:currentApply,type:1}"></apply-nopay>
            <ticketDialog ref="invoiceChild" @ticketDialogBtn="invoiceBtn"></ticketDialog>
        </header-footer>
        <!-- <slryTips ref="slryTipsChild"></slryTips> -->
    </div>
</template>

<script>
    var _this;
    import headerFooter from '@/components/header_and_footer.vue'
    import slryApply from '@/components/slry_apply.vue'
    import applyNopay from '@/components/apply_nopay.vue'
    import ticketDialog from '@/components/invoice_lists.vue'
    // import slryTips from '@/components/slry_tips.vue'
    export default {
        name: "slry_apply",
        data: function() {
            return {
                slryApplyInfo: false,
                currentApply: undefined,
                webUser: {
                    realName: "",
                    identityCode: ""
                },
                form: {}, //弹框里选择专业
                arrTabs: [],
                areas: [],
                invoice: {
                    invoiceType: 0,
                    invoiceTempId: "",
                    invoiceTitle: ""
                },
            }
        },
        beforeCreate: function() {
            _this = this;
        },
        mounted: function() {
            // this.$refs.slryTipsChild.showSlryTipsDialog();
            this.common.post(this.api.getCombApply, {}, function(res) {
                var info = res.resultMap;
                _this.webUser = info;
                if (info.currentApply != undefined) {
                    _this.currentApply = info.currentApply;
                    return;
                }
                if (info.currentFaceApply != undefined) {
                    _this.currentApply = info.currentFaceApply;
                }
            });
            this.getProCityArea();
        },
        methods: {
            chooseDialogBtn: function() {
                this.arrTabs = [];
                this.form = {};
                this.$refs.mychild.getCertificates();
            },
            handleClose: function(index) {
                this.arrTabs.removeAt(index);
                this.form = {};
            },
            getProCityArea: function() {
                this.common.post(this.api.getCityRepositoryList, {}, function(res) {
                    _this.areas = res.resultMap;
                    if (_this.areas.length == 1) {
                        _this.form.lessonPlace = _this.areas[0].dicKey;
                    }
                }, function(error) {
                    _this.$message.error(error.resultMsg);
                });
            },
            slrySureFunc: function(obj) {
                this.arrTabs.push(obj);
                this.common.post(this.api.getProductByCertificateName, {
                    projectCode: obj.projectCode,
                    identityCode: obj.identityCode,
                    certificateName: obj.certificateName
                }, function(res) {
                    _this.form = res.resultMap;
                    _this.form.certificateIds = obj.id;
                    _this.form.certificateOIds = obj.originalId;
                });
            },
            invoiceFunc: function() {
                this.invoice.invoiceTempId = "";
                this.invoice.invoiceTitle = "";
                this.invoice.invoiceType = "";
                this.$refs.invoiceChild.getInvoiceTemp();
            },
            invoiceBtn: function(data) {
                this.invoice = data;
            },
            submitSure: function() {
                if (String.isEmptyOrNUll(this.form.id)) {
                    this.$message.error("请选择专业！");
                    return;
                }
                if (String.isEmptyOrNUll(this.form.lessonPlace)) {
                    this.$message.error("请选择面授地点！");
                    return;
                }
                if (String.isEmptyOrNUll(this.invoice.invoiceTempId)) {
                    this.$message.error('请选择发票！');
                    return;
                }
                this.slryApplyInfo = true;
            },
            prev: function() {
                this.common.toPage("/index");
            },
            toPay: function() {
                console.log(this.form);
                var data = {
                    lessonPlace: this.form.lessonPlace,
                    type: "slry",
                    productId: this.form.id,
                    certificateIds: this.form.certificateIds,
                    certificateOIds: this.form.certificateOIds,
                    remark: "培训费60元，教材费20元",
                    invoiceType: this.invoice.invoiceType,
                    invoiceTempId: this.invoice.invoiceTempId
                };
                console.log(data);
                this.common.post(this.api.launchApplyTrade, data, function(res) {
                    localStorage.setItem("slryApply", 1);
                    _this.common.toPage("/apply/zhifubao/" + res.resultMap);
                });
            }
        },
        components: {
            headerFooter,
            slryApply,
            applyNopay,
            ticketDialog
        }
    }
</script>

<style>
    .header {
        width: 1150px;
    }

    .el-checkbox {
        margin-right: 0;
    }

    .special_webucation_table td .el-checkbox__label {
        display: none;
    }

    .special_apply_box .el-tag {
        margin: 0 6px;
    }

    .faceEducation .el-form-item__label {
        width: 164px !important;
    }
</style>
